<!DOCTYPE html>
<html>

<head>
<meta charset=utf-8>
<title>DataURL KOD - Data URL Maker, Data URL CSS Optimizer and the Data URL Toolkit
</title>

<link rel=stylesheet href=../DataURL/DataURL.css type=text/css>
<script src=//ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js type=text/javascript>
</script>

</script>
<script type="text/javascript">
$(document).ready(function() {
	$('#about').fadeIn('slow'); //tab pertama ditampilkan
	$('ul#nav li a').click(function() { // jika link tab di klik
		$('ul#nav li a').removeClass('active'); //menghilangkan class active (yang tampil)
		$(this).addClass("active"); // menambahkan class active pada link yang diklik
		$('.page').hide(); // menutup semua konten tab
		var aktif = $(this).attr('href'); // mencari mana tab yang harus ditampilkan
		$(aktif).fadeIn('slow'); // tab yang dipilih, ditampilkan
		return false;
	});

});

</script>
<link rel=icon type=image/x-icon href=../DataURL/favicon.ico>

<link rel=apple-touch-icon href=../DataURL/apple-touch-icon.png>
<meta content=0oOgS6AnAHAZdekBCiRWlNi9_-g name='alexaVerifyID'/>
<meta content=eEk82nU9cd6QvUIAUj7Ke2TGD1TUWF9-UfSzbupEDcY name='google-site-verification'/>
</head>

<body>

<header><h1><img src=/dataurlnet-icon.png style=margin:0;padding:0;margin-bottom:-6px;margin-right:4px>DataURL KOD</h1><h2>✸ Your one-stop HTML5 spot for all things Data URL ✸</h2></header><nav>
<ul>
<li><a href="#tab1" class="active">Home</a></li>
<li> <a href=#tab2>Data URL Maker</a> </li>
<li> <a href=#tab2>CSS Optimizer</a> </li>
<li> <a href=#tab2>Downloads</a> </li>
</ul></nav><article>

<div id=body_about class=page>

<div class=indexbox>
<ul>
<li><a href=#what>What are Data URLs?</a></li>
<li><a href=#history>History</a></li>
<li><a href=#look>How do they look?</a></li>
<li><a href=#advantages>Advantages</a></li>
<li><a href=#disadvantages>Disadvantages</a></li>
<li><a href=#browser>Browser support</a></li>
<li><a href=#maintainers>Maintainers</a></li>
</ul>
</div>

<p><strong>DATAURL KOD</strong> is home to some open source tools for creating and working with Data URLs(<a href=http://tools.ietf.org/html/rfc2397>RFC 2397</a>).</p>

<p>Two of these tools are <strong>web-based</strong> and available here:</p>
<ul>
<li><a href=#dataurlmaker onClick="ShowPage('dataurlmaker')"><strong>Data URL Maker</strong></a> converts files to Data URLs.</li>
<li><a href=#cssoptimizer onClick="ShowPage('cssoptimizer')"><strong>Data URL CSS Optimizer</strong></a> optimizes CSS files by embedding external images as Data URLs.</li>
</ul>

<p>Various modules, code examples and GUI/command line tools for <strong>UNIX systems</strong> are available in <a href=#downloads onClick="ShowPage('downloads')">Downloads</a>.</p>

<div class=small><h3 id=what>What are Data URLs?</h3>

<p>Data URLs are a Uniform Resource Identifier scheme that allow you to include data items inline in a web page as if they were being referenced as external resources. Data URLs are a form of Uniform Resource Locators, although they do not in fact remotely locate anything.Instead, the resource data is contained within the URL string itself as a <a href=http://en.wikipedia.org/wiki/Base64>base64-encoded</a> string. This saves the browser from having to make additional HTTP requests for the external resources, and can thus increase page loading speed.</p><h3 id=history>History</h3>

<p>The data URL scheme was defined in <a href=http://tools.ietf.org/html/rfc2397>RFC 2397</a> specification of the <a href=http://www.ietf.org/>Internet Engineering Task Force</a>.Although the IETF published the Data URL specification in 1998, it was never formally adopted as a standard. However, the HTML 4.01 specification references the data URI scheme through which Data URLs are implemented, and after years of neglect, support for Data URLs in some form or another has now been implemented in all modern browsers, including Internet Explorer 8.</p><h3 id=look>What do Data URLs look like?</h3>

<p>Data URLs use the following syntax:</p>
<blockquote>data:[mimetype][;base64],[data]
</blockquote>

<p>Let's say we have a small file icon image we want to embed in an HTML document. In that case,we would specify a mime type identifying the image (in this case, a GIF image) followed by the base64-encoded file data:</p>
<blockquote>&lt;img width="11" height="14" src=" lhCwAOAMQfAP////7+/vj4+Hh4eHd3d/v7+/Dw8HV1dfLy8ubm5vX19e3t7fr 6+nl5edra2nZ2dnx8fMHBwYODg/b29np6eujo6JGRkeHh4eTk5LCwsN3d3dfX 13Jycp2dnevr6////yH5BAEAAB8ALAAAAAALAA4AAAVq4NFw1DNAX/o9imAsB tKpxKRd1+YEWUoIiUoiEWEAApIDMLGoRCyWiKThenkwDgeGMiggDLEXQkDoTh CKNLpQDgjeAsY7MHgECgx8YR8oHwNHfwADBACGh4EDA4iGAYAEBAcQIg0Dk gcEIQA7" alt="File Icon"&gt;
</blockquote>

<p>This HTML tag would display the following image:</p>
<blockquote><img width=11 height=14 src= alt="File Icon">
</blockquote><h3 id=advantages>Advantages of Data URLs</h3>

<p>Using Data URLs for the web can have several advantages:</p>
<ul>
<li> <strong>Data URLs save HTTP requests.</strong> 

<p>Data URLs can reduce the number of HTTP requests the browser needs to make to display an HTML document.Since the data is contained within the URL instead of being located in an external resource, no HTTP request needs to be made to display the content. Web browsers are typically configured to use somewhere between two and eight connections to a webserver at any given time. Minimizing the number of browser requests is an important component of optimizing web page loading times: Data URLs can thus have beneficial effects on performance.</p></li>
<li> <strong>Faster transfer of small files</strong> 

<p>For transferring small files, Data URLs can result in faster downloading. Data transfers via TCP start slowly, and each external resource starts a new TCP connection to the server. The transfer speed may thus be held back by the overhead of TCP communication.</p></li>
<li> <strong>Less bandwidth usage (in certain cases)</strong> 

<p>Data URLs use less bandwidth whenever the overhead of encoding the data as a Data URL is smaller than the overhead of an HTTP request. For example, the required base64 encoding for an image 600 bytes long would be 800 bytes, so if an HTTP request required more than 200 bytes of overhead, the data URI would be more efficient.</p></li>
<li> <strong>Faster HTTPS</strong> 

<p>HTTPS requests have much greater overhead than ordinary HTTP requests due to SSL encryption.If your website is served over HTTPS, providing resources via Data URLs can improve performance significantly.</p></li>
</ul><h3 id=disadvantages>Disadvantages of Data URLs</h3>

<p>The use of Data URLs has several disadvantages which should be kept in mind:</p>
<ul>
<li> <strong>Repeated occurences</strong> 

<p>Data URLs must repeat the string of data each time they are used within a document, so if the same resource is used multiple times, there will be increased bandwidth usage.</p></li>
<li> <strong>Caching</strong> 

<p>Data URLs cannot be cached separately from their containing documents. They must therefore be redownloaded every time the containing document is redownloaded. This means, for example, that if a browser reloads an HTML document containing Data URLs, it must redownload all the data of embedded resources.</p></li>
<li> <strong>Re-encoding for changes</strong> 

<p>Content must be re-encoded and re-embedded every time a change is made. The hassle this entails can be minimized by using some of the free software available on this website.However, you won't want to start using Data URLs until the development process for your website is complete.</p></li>
<li> <strong>No support in old versions of Internet Explorer</strong> 

<p>Internet Explorer versions prior to version 8 do not support Data URLs at all. There are several work-arounds for this, whereby you can gain the benefits of Data URLs for other browsers while serving older browsers traditional images.</p></li>
<li> <strong>Base64 encoding increases data size</strong> 

<p>Base64-encoded Data URLs are 33% larger in size than their binary counterparts. However, if you use gzip content encoding on your webserver, this is reduced to between 0-10%.</p></li>
<li> <strong>Size limitations</strong> 

<p>According to the Data URL specification, browsers need only support Data URLs up to 1024 bytes long.Most browsers, however, will accept much larger ones. Opera limits Data URLs to about 4100 characters,Firefox (Mozilla ) up to 100 KB, Internet Explorer about 32 KB, and WebKit (Safari) doesn't seem to have any limit at all. Typically, however, the benefits of using Data URLs disappear at with larger images,so they are best used only for small (~1-4KB) images.</p></li>
</ul><h3 id=browser>Browser support</h3>

<p>Data URIs are currently supported by the following web browsers:</p>
<ul>
<li>Firefox and all browsers that use the Mozilla Foundation's Gecko rendering engine</li>
<li>Safari, Chrome and other WebKit-based browsers</li>
<li>Opera</li>
<li>Konqueror</li>
<li>Internet Explorer 8+ (with certain limitations)</li>
</ul><h3 id=maintainers>Maintainers</h3>

<p>The <a href=https://github.com/sveinbjornt/Data-URL-Toolkit>Data URL Toolkit project</a>, which this website is part of, was developed and is currently maintained by <a onClick="location.href='mailto:'+'sveinbjornt'+'@'+'gmail'+'.'+'com'">Sveinbjorn Thordarson &lt;sveinbjornt __at__ gmail&gt;</a>.
<br>
<br>
<br>
</div>
</div>

<div id=body_dataurlmaker class=page><h3 class=lowmargin>Data URL Maker</h3>

<div id=fileselectform>

<form id=upload-form target=myiFrame action=/cgi-bin/dataurl.pl method=POST enctype=multipart/form-data style=display:inline>

<p>Select or drag a file to get the Data URL: 
<input type=file name=file id=fileinput style=display:inline> 
<input type=hidden name=action value=encode style=display:inline> </p>
</form><iframe name=myiFrame id=postframe></iframe>
</div>

<div id=droparea onClick>
</div>

<div id=dataurldisplay>

<div id=dataurltextwrap><h3 id=dataurlfilename class=lowmargin>Data URL</h3>
<textarea id=dataurltextarea>
</textarea>

<p id=dataurlfilesize></p>
</div>

<div id=dataurlimgview><h3 class=lowmargin>Image preview</h3>

<div id=dataurlimg>
</div>
</div>

<div style=clear:both>
</div>
</div>
</div>

<div id=body_cssoptimizer class=page><h3 class=lowmargin>Data URL CSS Optimizer</h3>

<p>Type in a URL below and the Data URL CSS optimizer will fetch your stylesheet and convert linked image resources into Data URLs. </p>

<div id=cssform>

<p><strong>Remote CSS URL</strong> 
<input type=text id=cssurl name=css_file_url value=http://> 
<input type=button id=optimizebutton value=Optimize onClick=OptimizeCSS()> </p>

<p class=small>Base64-encode all images smaller than 
<select id=css_sizelimit> 

<option value=1>1 KB</option>

<option value=2>2 KB</option>

<option value=3>3 KB</option>

<option value=4 selected>4 KB</option>

<option value=5>5 KB</option>

<option value=6>6 KB</option>

<option value=7>7 KB</option>

<option value=8>8 KB</option>

<option value=9>9 KB</option>

<option value=10>10 KB</option>

<option value=15>15 KB</option>

<option value=20>20 KB</option>

<option value=25>25 KB</option>

<option value=30>30 KB</option>

<option value=40>40 KB</option>

<option value=50>50 KB</option>

<option value=75>75 KB</option>

<option value=100>100 KB</option>

<option value=10000000000>Infinity</option> 
</select> | 
<input type=checkbox id=compress_css name=compress onClick=CompressCSSClicked(this)>Minify CSS| 
<input type=checkbox name=optimize_images>Optimize images (slow)</p>
</div>
<hr class=separator>

<div id=status_message style=display:none>
</div>

<div id=ajaxloader_wrapper style=display:none>
<br>
<br><img src=../DataURL/ajax-loader.gif style=margin:auto alt=Loading>
</div>

<div id=css_output_container><h4 class=lowmargin>Resources</h4>

<div id=css_resources style=display:none>
</div>

<div id=css_stats_wrapper>

<div class=css_stats><h4 class=lowmargin>Before</h4>

<div id=pre_output>
</div>
</div>

<div class=css_stats><h4 class=lowmargin>After</h4>

<div id=post_output>
</div>
</div>

<div style=clear:both>
</div>
<br>
<br>
<br>

<div id=css_container>

<div id=css_downloadlink>
</div>

<p>Optimized CSS</p>

<div id=css_output>
</div>
</div>
</div>
</div>
</div> 

<div id=body_downloads class=page><h3 class=lowmargin>Downloads</h3>

<p>All software here is shared under the conditions of the <a href=http://www.gnu.org/licenses/lgpl.html>GNU Lesser General Public License</a>.</p>
<ul>
<li> <strong><a href=../DataURL/dataurlmaker.tgz>dataurlmaker.pl</a></strong> 

<p>Perl command line tool for creating Data URLs</p></li> 
<li> <strong><a href=../DataURL/DataURLToolkit.tgz>Complete Data URL Toolkit</a></strong> 

<p>The entire source code repository for the complete Data URL Toolkit,which includes this website and the back-end web application, implemented in <a href=http://perl.org>Perl</a>.</p></li>
</ul><h3>Useful links</h3>
<ul>
<li> <strong><a href=https://github.com/sveinbjornt/Data-URL-Toolkit>Data URL Toolkit on GitHub</a></strong> 

<p>This project's open source code repository on GitHub. Fork and have fun!</p></li>
<li> <strong><a href=http://sveinbjorn.org/dataurls_css>Using Data URLs Effectively with Cascading Style Sheets</a></strong> 

<p>Old guide on optimizing with Data URLs.</p></li>
<li> <strong><a href=http://www.websiteoptimization.com/speed/tweak/inline-images/>WebsiteOptimization.com</a></strong> 

<p>Inline Images with Data URLs - embed graphics inline with data uri scheme</p></li>
<li> <strong><a href=http://en.wikipedia.org/wiki/Data_URI_scheme>Data URL Wikipedia Entry</a></strong> 

<p>Wikipedia entry on Data URIs.</p></li>
<li> <strong><a href=http://www.mobify.com/blog/data-uris-are-slow-on-mobile/>Data URIs Are Slow On Mobile</a></strong> </li>
</ul>
<br>
<br>
<br>
</div></article><footer>&copy; 2011-2013 <a onmouseover="this.href='mailto:'+'sveinbjornt'+'@'+'gmail'+'.'+'com'" style=cursor:pointer href=#>Sveinbjorn Thordarson</a>. All code GNU <a href=http://www.gnu.org/licenses/lgpl.html>LGPL</a>'d. Powered by <a href=http://perl.org>Perl</a> and <a href=http://apache.org>Apache</a> on <a href=http://www.debian.org/>Debian</a> publish <a href=http://kang-onk.blogspot.com/>KOD</a></footer>
<script type=text/javascript>$(document).ready(Init);
</script>
</body>
</html>
